<!--
 * @Description: 商品组件
 * @Autor: WangYuan
 * @Date: 2021-05-21 19:13:20
 * @LastEditors: WangYuan
 * @LastEditTime: 2022-01-18 16:45:15
-->
<template>
  <div :style="[$wrapStyle(styles)]">
    <goods-list :list="goodsList"></goods-list>
  </div>
</template>

<script>
import GoodsList from "./GoodsList.vue";
export default {
  name: "McGoods",

  components: { GoodsList },
  provide() {
    return {
      tabs: this,
    };
  },

  props: {
    styles: {
      type: Object,
      default: () => {},
    },
    attrs: {
      type: Object,
      default: () => {},
    },
    goodsData: {
      type: Array,
      default: () => [],
    },
  },

  data () {
    return {
      goodsList: [],
      current: 1,
      isShow: false
    }
  },

  computed: {
    config() {
      return {
        styles: this.styles,
        attrs: this.attrs,
        goodsData: this.goodsData,
      };
    },
  },

  mounted () {
    this.getList()
  },

  methods: {
    getList () {
      this.$http.getGoodsList({
        page: this.current
      }).then(res => {
        if (res.status == 200) {
          if (res.data.length == 0) {
            this.loadingType = 2
            return false
          }
          this.goodsList = [...this.goodsList, ...res.data]

          this.loadingType = 0
          this.current = this.current + 1
          this.isShow = true
        }
      })
    },
  }
};
</script>


<style lang="scss" scoped>
</style>
